<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue基本语法练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{message}}
    </div>
    <div id="app2">
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
    </div>
    <div id="app3">
        <p v-if="seen">现在你看到我了！</p>
    </div>
    <div id="app4">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>
    <div id="app5">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">反转消息</button>
    </div>
    <div id="app6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>
</body>
</html>
<script>
    var app = new Vue({
        el:"#app",
        data:{
          message:"Hello,vue!",
        },
    })
    var app2 = new Vue({
        el:"#app2",
        data:{
           message:"页面加载于" + new Date().toLocaleString(),
        },
    })
    var app3 = new Vue({
        el:"#app3",
        data:{
            seen:true,
        },

    })
    var app4 = new Vue({
        el:"#app4",
        data:{
          todos:[
              {text:"学习 JavaScript"},
              {text:"学习 Vue"},
              {text:"整个牛的项目！"}
          ],
        },
    })
    var app5 = new Vue({
        el:"#app5",
        data:{
          message:'Hello Vue.js.1',
        },
        methods:{
            reverseMessage:function () {
                this.message = this.message.split('').reverse().join('')
            }
        },
    })
    var app6 = new Vue({
        el:"#app6",
        data:{
          message:"你好呀，Vue!"
        },
    })
</script>